<mat-toolbar color="primary">
  <h1 class="mat-headline">
    {{ 'Block' | translate }} #{{id$ | async}}
  </h1>
</mat-toolbar>
<ng-container *ngIf="block$ | async as block; else loading">
  <mat-tab-group color="primary" dynamicHeight="true" *ngIf="!block.isError; else error">
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon style="margin-right:5px;">info</mat-icon>
        {{ 'BlockInformation' | translate }}
      </ng-template>
      <app-block-information [block]="block.value"></app-block-information>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon style="margin-right:5px;">code</mat-icon>
        {{ 'BlockchainRawData' | translate }}
      </ng-template>
      <prettyjson [obj]="block.value"></prettyjson>
      <!-- <div style="padding:10px;">
        <ngx-json-viewer [json]="block.value" [expanded]="false"></ngx-json-viewer>
      </div> -->
    </mat-tab>
  </mat-tab-group>
  <ng-template #error>
    <app-error></app-error>
  </ng-template>
</ng-container>
<ng-template #loading>
  <app-spinner></app-spinner>
</ng-template>
